<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>reveal.js – The HTML Presentation Framework</title>

		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="Hakim El Hattab">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="../css/reveal.css">
		<link rel="stylesheet" href="../css/theme/black.css" id="theme">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="../lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? '../css/print/pdf.css' : '../css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
          <h3>SVG</h3>    
          <p>
            可缩放矢量图形 (SVG) 帮助你使用直线，曲线，和其他的几何图形来生成图像。通过使用矢量图形，你能够画出任意拉伸也不失真的图像。
          </p>
        </section>

        <section>
          <h2>元素和属性</h2>

          <section data-markdown>
          ### 基本元素
          
          * 图形元素 `&lt;circle&gt;, &lt;ellipse&gt;, &lt;image&gt;, &lt;line&gt;, &lt;path&gt;, &lt;polygon&gt;, &lt;polyline&gt;, &lt;rect&gt;, &lt;text&gt;`

          * 结构元素 `&lt;defs&gt;, &lt;g&gt; &lt;svg&gt;`

          * 渐变元素 `&lt;linearGradient&gt;, &lt;radialGradient&gt;`

          </section>

          <section data-markdown>
          ### 基本属性

          * fill 填充颜色
          * fill-opacity 填充opacity
          * stroke 描边颜色
          * stroke-width 描边宽度
          * transform: translate rotate scale matrix
          </section>

            <section>
            <p>&lt;path&gt; 属性 d</p>
            
            <p>下面的命令可用于路径数据：</p>
            
            <pre>
            M = moveto
            L = lineto
            H = horizontal lineto
            V = vertical lineto
            C = curveto 三次belzier曲线
            S = smooth curveto 同样三次belzier曲线，更平滑
            Q = quadratic Belzier curve 二次belzier曲线
            T = smooth quadratic Belzier curveto 同样二次belzier曲线，更平滑
            A = elliptical Arc
            Z = closepath
            </pre>

            注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
          </section>


          <section data-markdown>
          ### example
```
&lt;svg width="202" height="202"&gt;
  &lt;line x1="0" y1="200" x2="200" y2="0"
    fill="none" stroke="#0086B2" stroke-width="1"&gt;&lt;/line&gt;
&lt;/svg&gt;
&lt;svg width="202" height="202"&gt;
  &lt;defs&gt;
    &lt;linearGradient id="MyGradient"&gt;
      &lt;stop offset="5%" stop-color="green" /&gt;
      &lt;stop offset="95%" stop-color="gold" /&gt;
    &lt;/linearGradient&gt;
  &lt;/defs&gt;
  &lt;rect x="0" y="0" width="200" height="200" rx="0" ry="0"
    fill="url(#MyGradient)" fill-opacity="0.3"
    stroke="#0086B2" stroke-width="1"&gt;&lt;/rect&gt;
&lt;/svg&gt;
&lt;svg width="202" height="202"&gt;
  &lt;circle cx="100" cy="100" r="100" 
    fill="none" stroke="#0086B2" stroke-width="1"&gt;&lt;/circle&gt;
&lt;/svg&gt;
&lt;svg width="202" height="202"&gt;
  &lt;polyline points="0,0 200,100 0,100 200,200"
    fill="none" stroke="#0086B2" stroke-width="1"&gt;&lt;/polyline&gt;
&lt;/svg&gt;
&lt;svg width="202" height="202"&gt;
  &lt;ellipse cx="100" cy="100" rx="100" ry="30"
    fill="none" stroke="#0086B2" stroke-width="1"&gt;&lt;/ellipse&gt;
&lt;/svg&gt;
&lt;svg width="202" height="202"&gt;
  &lt;polygon points="100,0 0,200 200,200"
    fill="none" stroke="#0086B2" stroke-width="1"&gt;&lt;/polygon&gt;
&lt;/svg&gt;
&lt;svg width="202" height="202"&gt;
  &lt;path d="M 50 50 L 150 50 L 100 150 z"
    fill="orange" stroke="black" stroke-width="3" /&gt;
&lt;/svg&gt;
&lt;svg width="202" height="202"&gt;
  &lt;image xlink:href="/assets/img/pic.jpg"
    x="0" y="0" height="200" width="200" /&gt;
&lt;/svg&gt;
&lt;svg width="202" height="202"&gt;
  &lt;text x="0" y="35" font-family="Verdana" font-size="35"&gt;
    Hello, SVG!
  &lt;/text&gt;
&lt;/svg&gt;
```
          </section>

          <section data-markdown>
            ### transform 属性的注意事项

            translate和scale的顺序问题

```
&lt;svg width="300" height="300"&gt;
  &lt;g&gt;
    &lt;rect x="0" y="0" width="200" height="200" rx="0" ry="0"
      fill="#f00" fill-opacity="0.5" stroke="#0086B2" stroke-width="1"
      transform="scale(0.5)"&gt;&lt;/rect&gt;
    &lt;rect x="0" y="0" width="200" height="200" rx="0" ry="0"
      fill="#0f0" fill-opacity="0.5" stroke="#0086B2" stroke-width="1"
      transform="scale(0.5) translate(20,20)"&gt;&lt;/rect&gt;
    &lt;rect x="0" y="0" width="200" height="200" rx="0" ry="0"
      fill="#00f" fill-opacity="0.5" stroke="#0086B2" stroke-width="1"
      transform="translate(20,20) scale(0.5)"&gt;&lt;/rect&gt;
  &lt;/g&gt;
&lt;/svg&gt;
```
          </section>

          <section data-markdown>
            普通DOM元素的css transform 也是一样的

            ![layout-transform](/node_modules/hy5b/doc/layout/dom-transform-scale-translate.png)
          </section>
        </section>

        <section data-markdown>
          ### 图表组件两大技术

          * canvas 调用api绘图，依赖`&lt;canvas&gt;`容器
          * svg 用标签定义图形

          ![canvas 和 svg 的一些不同之处]()
        </section>

        <section data-markdown>
          * 理论上讲svg更适合做图表组件
          * 但是canvas有一个非常的好的功能，就是可以直接导出绘图区域的图片

          ```js
          var canvas = document.getElementById("canvas");
          var base64image = canvas.toDataURL(); //生成base64编码的图片信息
          ```

          * 在页面上，我们导出每个组件的图片，再绘制到一个大的canvas中，再导出一次就能得到完整的截图了
        </section>

        <section data-markdown>
          svg 就比较麻烦了，有两种方案

          * 用事先准备好的图片替代
          * svg 转成图片

```js
/**
 * image [HTMLImageElement] |
 *       [HTMLVideoElement] |
 *       [HTMLCanvasElement] |
 *       [ImageBitmap]
 */
void ctx.drawImage(image,dx,dy);
void ctx.drawImage(image,dx,dy,dWidth,dHeight);
void ctx.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);
```
        </section>

        <section>
          <h3>用事先准备好的图片替代</h3>
  
          <p>在生成整体canvas时把准备好的图片画进去</p>

<pre><code class="hljs">var image = new Image();
image.src = '/assets/img/pic.jpg';
image.onload = function() {
  ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
}</code></pre>

          <img src="/node_modules/hy5b/doc/layout/draw-image.png" width="200px">
          <img src="/node_modules/hy5b/doc/layout/img-zoom.png" width="200px">
          <img src="/node_modules/hy5b/doc/layout/img-zoom-2.png" width="200px">

          <p>webgl 的globe就是用这种方案</p>

        </section>

        <section data-markdown>
          ### 转成图片再导出

          ```js
          var svgElem = document.getElementById("svg");
          var svg_xml = (new XMLSerializer()).serializeToString(svgElem);
          var src = 'data:image/svg+xml;base64,' + btoa(svg_xml);
          var image = new Image();
          image.src = src;
          image.onload = function() {
            ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
          }
          ```

          方案的局限性

          * 要求所有属性必须为内联，不能写在css中
          * `&lt;image&gt;` 外链图片无法支持

```html
//不支持
&lt;image xlink:href="/assets/img/pic.jpg" x="-30" y="-30" height="60" width="60" /&gt;
//支持
&lt;image xlink:href="" x="-30" y="-30" height="60" width="60" /&gt;
```
          
        </section>

        <section data-markdown>
          ###关于背景图和背景色

          * 同样有局限，必须是内联属性
        </section>

			</div>

		</div>

		<script src="../lib/js/head.min.js"></script>
		<script src="../js/reveal.js"></script>

		<script>

			// More info https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				transition: 'slide', // none/fade/slide/convex/concave/zoom

				// More info https://github.com/hakimel/reveal.js#dependencies
				dependencies: [
					{ src: '../lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: '../plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: '../plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: '../plugin/zoom-js/zoom.js', async: true },
					{ src: '../plugin/notes/notes.js', async: true }
				]
			});

		</script>

	</body>
</html>
